<template>
  <h2>--- Vue3 setup 定义的功能 ---</h2>
  <h4>你好，我的名字：{{ nameDefinedInSetup }}</h4>
  <h4>这里是在测试 Vue3 语法定义的 setup 能否拿到 data() 中定义的属性：{{ nameFromData }}</h4>
  <button @click="alertInSetup">按一下试试</button>
  <button @click="checkIfGotDataOrMethodsFromVue2Configuration">按一按，按F12看看能不能拿到 vue2 配置中定义的数据与方法</button>

  <br />
  <h2>--- Vue2 data 和 methods 定义的功能 ---</h2>
  <h4>你好，我的名字：{{ nameInData }}</h4>
  <h4>这里是在测试 Vue2 语法定义的data 能否拿到 setup 中定义的属性：{{ namefromSetup }}</h4>
  <button @click="alertInMethods">你再按一下试试</button>
  <button @click="checkIfGotDataOrMethodsFromVue3Configuration">按一按，按F12看看能不能拿到 vue3 配置中定义的数据与方法</button>
</template>

<script>
//import { h } from 'vue'

export default {
  name: 'App',

  // Vue3 中依旧可以通过 data() 创建数据
  data() {
    return {
      nameInData: 'name from data',
      namefromSetup: this.nameDefinedInSetup
    }
  },

  // Vue3 中依旧可以通过 methods 创建函数
  methods: {
    alertInMethods() {
      alert(`这是一个从 methods 中定义的函数弹出的警示`)
    },
    // Vue2 定义的 data 与 method 内，可以拿到 Vue3 setup 中定义的数据和方法
    checkIfGotDataOrMethodsFromVue3Configuration() {
      console.log('拿到的从Vue3 语法中定义的 data 为：', this.nameDefinedInSetup); //name from setup
      console.log('拿到的从Vue3 语法中定义的 methods 为：', this.alertInSetup); // alertInSetup() {alert('这是一个从 setup 中弹出的警示！');}
    }
  },
  // Vue3 中可以将组件中所用到的：数据（data）、方法（method）等等，均要配置在 setup 中
  setup() {
    const nameDefinedInSetup = 'name from setup'

    function alertInSetup() {
      alert('这是一个从 setup 中弹出的警示！')
    }

    // Vue3 定义的方法中，无法拿到 Vue2 语法定义的 data 和 methods
    function checkIfGotDataOrMethodsFromVue2Configuration() {
      console.log('拿到的从Vue2 语法中定义的 data 为：', this.nameInData); // undefined
      console.log('拿到的从Vue2 语法中定义的 methods 为：', this.alertInMethods);// undefined
    }

    //setup 函数的返回值可以是一个对象，对象中的属性、方法，在模板中均可以直接使用
    return {
      nameDefinedInSetup,
      alertInSetup,
      checkIfGotDataOrMethodsFromVue2Configuration
    }

    // setup 函数的返回值可以是一个函数，函数的返回值是自定义渲染内容（会覆盖 template 中定义的所有内容）
    // return function () {
    //   return h('h1', "这里是 setup 返回的函数渲染的内容")
    // }
  }
}
</script>

<style></style>
